<template>
  <div id="now">
      <ul>
        <li v-for="item in nowPlayData" :key="item.id">
          <div>
            <img :src="item.img" alt="">
          </div>
          <div class="second">
            <p>{{item.title}}</p>
            <p>观众评 <span>{{item.score}}</span> </p>
            <p class="performer">{{item.actors}}</p>
            <p>{{item.nums}}</p>
          </div>
          <div>
            <button>购票</button>
          </div>
        </li>
      </ul>
  </div>
</template>

<script>
export default {
  name:'Now',
  methods:{
    getNowPlayData(){
      var that = this;
      axios.get('/mock/nowPlayData.json')
      .then(function(response){
        console.log(response);
        if(response.status == 200){
          if(response.data && response.data.nowPlayData){
            that.nowPlayData = response.data.nowPlayData
          }
        }
      })
      .catch(function(error){
        console.log(error);
      })
    }
  },
  created(){
    this.getNowPlayData();
  },
  data(){
    return{
      nowPlayData:[]
    }
  }
}
</script>

<style scoped>
  #now{
    width: 100%;
    padding-bottom: 50px;
  }
  #now li{
    width: 95%;
    height: 120px;
    margin: 10px;
    border-bottom: 2px solid rgb(216, 216, 216);
  }
  #now li div{
    float: left;
  }
  #now li div img{
    width: 80px;
  }
  #now li div:nth-child(1){
    width: 25%;
  }
  #now li div:nth-child(3){
    line-height: 100px;
  }
  #now li div:nth-child(3) button{
    color: white;
    background-color: #e54847;
    width: 40px;
    height: 30px;
    border: 0;
    border-radius: 5px;
  }
  .second{
    width: 60%;
    margin:0 0 0 10px;
  }
  .second p{
    margin-bottom: 5px;
  }
  .second p:nth-child(1){
    font-size: 20px;
    font-weight: bold;
  }
  .second p:nth-child(2) span{
    color: rgb(240, 161, 59);
  }
  .performer{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
</style>